
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-collapsed"></i>
                    <div class="name">折叠</div>
                    <div class="fontclass">.icon-collapsed</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-excel"></i>
                    <div class="name">Excel</div>
                    <div class="fontclass">.icon-excel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-image"></i>
                    <div class="name">image</div>
                    <div class="fontclass">.icon-image</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pdf"></i>
                    <div class="name">pdf</div>
                    <div class="fontclass">.icon-pdf</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ppt"></i>
                    <div class="name">ppt</div>
                    <div class="fontclass">.icon-ppt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-txt"></i>
                    <div class="name">txt</div>
                    <div class="fontclass">.icon-txt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-word"></i>
                    <div class="name">word</div>
                    <div class="fontclass">.icon-word</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zip"></i>
                    <div class="name">zip</div>
                    <div class="fontclass">.icon-zip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-spanner"></i>
                    <div class="name">扳手</div>
                    <div class="fontclass">.icon-spanner</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-save"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm"></i>
                    <div class="name">报警警报预警</div>
                    <div class="fontclass">.icon-alarm</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collision"></i>
                    <div class="name">比对碰撞</div>
                    <div class="fontclass">.icon-collision</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-car-collision"></i>
                    <div class="name">车辆碰撞</div>
                    <div class="fontclass">.icon-car-collision</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-floor-building"></i>
                    <div class="name">大楼3</div>
                    <div class="fontclass">.icon-floor-building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-story-building"></i>
                    <div class="name">大楼1</div>
                    <div class="fontclass">.icon-story-building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-high-building"></i>
                    <div class="name">大楼2</div>
                    <div class="fontclass">.icon-high-building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-brain"></i>
                    <div class="name">大脑</div>
                    <div class="fontclass">.icon-brain</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-record"></i>
                    <div class="name">档案</div>
                    <div class="fontclass">.icon-record</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-ruler"></i>
                    <div class="name">地图尺子</div>
                    <div class="fontclass">.icon-map-ruler</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-gas"></i>
                    <div class="name">地图加油站</div>
                    <div class="fontclass">.icon-map-gas</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-connect"></i>
                    <div class="name">地图连线1</div>
                    <div class="fontclass">.icon-map-connect</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-direction"></i>
                    <div class="name">地图连线转移</div>
                    <div class="fontclass">.icon-map-direction</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-oil"></i>
                    <div class="name">地图石油</div>
                    <div class="fontclass">.icon-map-oil</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-finger"></i>
                    <div class="name">地图-手指</div>
                    <div class="fontclass">.icon-map-finger</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-architecture"></i>
                    <div class="name">地图组织架构</div>
                    <div class="fontclass">.icon-map-architecture</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-site"></i>
                    <div class="name">地图组织站点</div>
                    <div class="fontclass">.icon-map-site</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-electricity"></i>
                    <div class="name">电池电量</div>
                    <div class="fontclass">.icon-electricity</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fixed-telephone"></i>
                    <div class="name">电话固话</div>
                    <div class="fontclass">.icon-fixed-telephone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-computer"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.icon-computer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danger"></i>
                    <div class="name">毒品危险</div>
                    <div class="fontclass">.icon-danger</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-split-screen-compare"></i>
                    <div class="name">分屏对比</div>
                    <div class="fontclass">.icon-split-screen-compare</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-evaluation"></i>
                    <div class="name">分析评比</div>
                    <div class="fontclass">.icon-evaluation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share"></i>
                    <div class="name">分享转发</div>
                    <div class="fontclass">.icon-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-servicer"></i>
                    <div class="name">服务器</div>
                    <div class="fontclass">.icon-servicer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-server-host"></i>
                    <div class="name">服务器主机</div>
                    <div class="fontclass">.icon-server-host</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-annex"></i>
                    <div class="name">附件</div>
                    <div class="fontclass">.icon-annex</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy-comparison"></i>
                    <div class="name">复制比对</div>
                    <div class="fontclass">.icon-copy-comparison</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-security-shield"></i>
                    <div class="name">公安盾牌</div>
                    <div class="fontclass">.icon-security-shield</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-manage-circuit"></i>
                    <div class="name">管理流转协作</div>
                    <div class="fontclass">.icon-manage-circuit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-locus"></i>
                    <div class="name">轨迹</div>
                    <div class="fontclass">.icon-locus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-orbit"></i>
                    <div class="name">轨迹1</div>
                    <div class="fontclass">.icon-orbit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-traffic-light"></i>
                    <div class="name">红绿灯违章</div>
                    <div class="fontclass">.icon-traffic-light</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sketchpad-theme"></i>
                    <div class="name">画板主题</div>
                    <div class="fontclass">.icon-sketchpad-theme</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-purse"></i>
                    <div class="name">货币钱袋资金</div>
                    <div class="fontclass">.icon-purse</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-base-signal"></i>
                    <div class="name">基站信号</div>
                    <div class="fontclass">.icon-base-signal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-load"></i>
                    <div class="name">加载</div>
                    <div class="fontclass">.icon-load</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-supervision"></i>
                    <div class="name">监控控制管理监管</div>
                    <div class="fontclass">.icon-supervision</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-build"></i>
                    <div class="name">大楼建筑</div>
                    <div class="fontclass">.icon-build</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-policeman"></i>
                    <div class="name">警察半身</div>
                    <div class="fontclass">.icon-policeman</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-camera"></i>
                    <div class="name">卡口摄像头</div>
                    <div class="fontclass">.icon-video-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-express-package"></i>
                    <div class="name">快递包裹</div>
                    <div class="fontclass">.icon-express-package</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-firearms"></i>
                    <div class="name">枪支</div>
                    <div class="fontclass">.icon-firearms</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-badge"></i>
                    <div class="name">认证徽章</div>
                    <div class="fontclass">.icon-badge</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-theft"></i>
                    <div class="name">入室盗窃</div>
                    <div class="fontclass">.icon-theft</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qq"></i>
                    <div class="name">社交qq</div>
                    <div class="fontclass">.icon-qq</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingtalk"></i>
                    <div class="name">社交钉钉</div>
                    <div class="fontclass">.icon-dingtalk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fly-letter"></i>
                    <div class="name">社交飞信</div>
                    <div class="fontclass">.icon-fly-letter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mitalk"></i>
                    <div class="name">社交米聊</div>
                    <div class="fontclass">.icon-mitalk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-momo"></i>
                    <div class="name">社交陌陌图标</div>
                    <div class="fontclass">.icon-momo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-microblog"></i>
                    <div class="name">社交微博</div>
                    <div class="fontclass">.icon-microblog</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-monitor-camera"></i>
                    <div class="name">卡口监控摄像头</div>
                    <div class="fontclass">.icon-monitor-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bayonet-camera"></i>
                    <div class="name">卡口视频摄像头</div>
                    <div class="fontclass">.icon-bayonet-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-approval"></i>
                    <div class="name">审批</div>
                    <div class="fontclass">.icon-approval</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-record-video"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-record-video</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-avi"></i>
                    <div class="name">AVI视频文件</div>
                    <div class="fontclass">.icon-avi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-desktop"></i>
                    <div class="name">台式机</div>
                    <div class="fontclass">.icon-desktop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-balance"></i>
                    <div class="name">天平公平研判</div>
                    <div class="fontclass">.icon-balance</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-team"></i>
                    <div class="name">团队</div>
                    <div class="fontclass">.icon-team</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-news-success"></i>
                    <div class="name">消息-成功</div>
                    <div class="fontclass">.icon-news-success</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-news-warn"></i>
                    <div class="name">消息-警告</div>
                    <div class="fontclass">.icon-news-warn</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-news-info"></i>
                    <div class="name">消息-信息</div>
                    <div class="fontclass">.icon-news-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-news-failure"></i>
                    <div class="name">消息-失败</div>
                    <div class="fontclass">.icon-news-failure</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collaboration"></i>
                    <div class="name">协同</div>
                    <div class="fontclass">.icon-collaboration</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collaboration-system"></i>
                    <div class="name">协同系统</div>
                    <div class="fontclass">.icon-collaboration-system</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-news"></i>
                    <div class="name">新闻</div>
                    <div class="fontclass">.icon-news</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-newspaper"></i>
                    <div class="name">新闻报纸</div>
                    <div class="fontclass">.icon-newspaper</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-judge"></i>
                    <div class="name">研判锤子</div>
                    <div class="fontclass">.icon-judge</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-man"></i>
                    <div class="name">用户-男</div>
                    <div class="fontclass">.icon-user-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-women"></i>
                    <div class="name">用户-女</div>
                    <div class="fontclass">.icon-user-women</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-circler-layout"></i>
                    <div class="name">圆形布局</div>
                    <div class="fontclass">.icon-circler-layout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-search"></i>
                    <div class="name">云搜系统</div>
                    <div class="fontclass">.icon-cloud-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paste"></i>
                    <div class="name">粘贴</div>
                    <div class="fontclass">.icon-paste</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-internet"></i>
                    <div class="name">站点网站互联网ie</div>
                    <div class="fontclass">.icon-internet</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bill"></i>
                    <div class="name">账单</div>
                    <div class="fontclass">.icon-bill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pay-jingdong"></i>
                    <div class="name">支付-京东</div>
                    <div class="fontclass">.icon-pay-jingdong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pay-taobao"></i>
                    <div class="name">支付-淘宝</div>
                    <div class="fontclass">.icon-pay-taobao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-union-pay"></i>
                    <div class="name">支付-银联</div>
                    <div class="fontclass">.icon-union-pay</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alipay"></i>
                    <div class="name">支付-支付宝</div>
                    <div class="fontclass">.icon-alipay</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fingerprint"></i>
                    <div class="name">指纹</div>
                    <div class="fontclass">.icon-fingerprint</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-teamwork"></i>
                    <div class="name">组织合作协作</div>
                    <div class="fontclass">.icon-teamwork</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-organiz"></i>
                    <div class="name">组织群体</div>
                    <div class="fontclass">.icon-organiz</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baby-child"></i>
                    <div class="name">婴儿-儿童</div>
                    <div class="fontclass">.icon-baby-child</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-thief"></i>
                    <div class="name">小偷-逃犯</div>
                    <div class="fontclass">.icon-thief</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-corpse"></i>
                    <div class="name">尸体</div>
                    <div class="fontclass">.icon-corpse</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Tandem"></i>
                    <div class="name">串并</div>
                    <div class="fontclass">.icon-Tandem</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-relation"></i>
                    <div class="name">关系</div>
                    <div class="fontclass">.icon-relation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-palm"></i>
                    <div class="name">手掌</div>
                    <div class="fontclass">.icon-palm</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dna"></i>
                    <div class="name">DNA</div>
                    <div class="fontclass">.icon-dna</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-synthetic-combat"></i>
                    <div class="name">合成作战</div>
                    <div class="fontclass">.icon-synthetic-combat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-area-map"></i>
                    <div class="name">区域地图</div>
                    <div class="fontclass">.icon-area-map</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sign-review"></i>
                    <div class="name">签字审核</div>
                    <div class="fontclass">.icon-sign-review</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-organization"></i>
                    <div class="name">团伙群体</div>
                    <div class="fontclass">.icon-organization</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cooperation"></i>
                    <div class="name">合作握手</div>
                    <div class="fontclass">.icon-cooperation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-case-file"></i>
                    <div class="name">案件档案</div>
                    <div class="fontclass">.icon-case-file</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-accurate-search"></i>
                    <div class="name">精确搜索查询</div>
                    <div class="fontclass">.icon-accurate-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-victim"></i>
                    <div class="name">受害遇害</div>
                    <div class="fontclass">.icon-victim</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-id-card"></i>
                    <div class="name">资料身份证档案</div>
                    <div class="fontclass">.icon-id-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rss"></i>
                    <div class="name">rss</div>
                    <div class="fontclass">.icon-rss</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-usb"></i>
                    <div class="name">USB</div>
                    <div class="fontclass">.icon-usb</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifi"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bus"></i>
                    <div class="name">巴士车</div>
                    <div class="fontclass">.icon-bus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bullseye"></i>
                    <div class="name">靶心</div>
                    <div class="fontclass">.icon-bullseye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-percentage"></i>
                    <div class="name">百分号</div>
                    <div class="fontclass">.icon-percentage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wrench"></i>
                    <div class="name">扳手</div>
                    <div class="fontclass">.icon-wrench</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-num-list"></i>
                    <div class="name">编号列表</div>
                    <div class="fontclass">.icon-num-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-note"></i>
                    <div class="name">便签</div>
                    <div class="fontclass">.icon-note</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tag"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-tag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tags"></i>
                    <div class="name">标签组</div>
                    <div class="fontclass">.icon-tags</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sheet"></i>
                    <div class="name">表格</div>
                    <div class="fontclass">.icon-sheet</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-four-squares"></i>
                    <div class="name">表格2</div>
                    <div class="fontclass">.icon-four-squares</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nine-squares"></i>
                    <div class="name">表格3</div>
                    <div class="fontclass">.icon-nine-squares</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pie-chart"></i>
                    <div class="name">饼图</div>
                    <div class="fontclass">.icon-pie-chart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-play"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-play</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-inside-play"></i>
                    <div class="name">播放2</div>
                    <div class="fontclass">.icon-inside-play</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-doctor-hat"></i>
                    <div class="name">博士帽</div>
                    <div class="fontclass">.icon-doctor-hat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-crop"></i>
                    <div class="name">裁剪</div>
                    <div class="fontclass">.icon-crop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tableware"></i>
                    <div class="name">餐具</div>
                    <div class="fontclass">.icon-tableware</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-insert-top"></i>
                    <div class="name">插入符-上</div>
                    <div class="fontclass">.icon-insert-top</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-insert-bottom"></i>
                    <div class="name">插入符-下</div>
                    <div class="fontclass">.icon-insert-bottom</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-insert-right"></i>
                    <div class="name">插入符-右</div>
                    <div class="fontclass">.icon-insert-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-insert-left"></i>
                    <div class="name">插入符-左</div>
                    <div class="fontclass">.icon-insert-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plug"></i>
                    <div class="name">插头</div>
                    <div class="fontclass">.icon-plug</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-inquiry"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.icon-inquiry</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zoomout"></i>
                    <div class="name">查询-</div>
                    <div class="fontclass">.icon-zoomout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-enlarge"></i>
                    <div class="name">查询+</div>
                    <div class="fontclass">.icon-enlarge</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-badreview"></i>
                    <div class="name">差评2</div>
                    <div class="fontclass">.icon-badreview</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-recall"></i>
                    <div class="name">撤销</div>
                    <div class="fontclass">.icon-recall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-multiply"></i>
                    <div class="name">乘号</div>
                    <div class="fontclass">.icon-multiply</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gearset"></i>
                    <div class="name">齿轮设置</div>
                    <div class="fontclass">.icon-gearset</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gearmore"></i>
                    <div class="name">齿轮组</div>
                    <div class="fontclass">.icon-gearmore</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bedbug"></i>
                    <div class="name">臭虫bug</div>
                    <div class="fontclass">.icon-bedbug</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taxi"></i>
                    <div class="name">出租车</div>
                    <div class="fontclass">.icon-taxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fax"></i>
                    <div class="name">传真</div>
                    <div class="fontclass">.icon-fax</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window"></i>
                    <div class="name">窗口</div>
                    <div class="fontclass">.icon-window</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bed"></i>
                    <div class="name">床</div>
                    <div class="fontclass">.icon-bed</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hammer"></i>
                    <div class="name">槌子</div>
                    <div class="fontclass">.icon-hammer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-print"></i>
                    <div class="name">打印</div>
                    <div class="fontclass">.icon-print</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-university"></i>
                    <div class="name">大学</div>
                    <div class="fontclass">.icon-university</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-code-branch"></i>
                    <div class="name">代码-分支</div>
                    <div class="fontclass">.icon-code-branch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mono-top"></i>
                    <div class="name">单角符-上</div>
                    <div class="fontclass">.icon-mono-top</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mono-bottom"></i>
                    <div class="name">单角符-下</div>
                    <div class="fontclass">.icon-mono-bottom</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mono-right"></i>
                    <div class="name">单角符-右</div>
                    <div class="fontclass">.icon-mono-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mono-left"></i>
                    <div class="name">单角符-左</div>
                    <div class="fontclass">.icon-mono-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pop"></i>
                    <div class="name">弹出</div>
                    <div class="fontclass">.icon-pop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-archive"></i>
                    <div class="name">档案</div>
                    <div class="fontclass">.icon-archive</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-login"></i>
                    <div class="name">登录</div>
                    <div class="fontclass">.icon-login</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dropper"></i>
                    <div class="name">滴管</div>
                    <div class="fontclass">.icon-dropper</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-earth"></i>
                    <div class="name">地球</div>
                    <div class="fontclass">.icon-earth</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-subway"></i>
                    <div class="name">地铁</div>
                    <div class="fontclass">.icon-subway</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map"></i>
                    <div class="name">地图</div>
                    <div class="fontclass">.icon-map</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-thumbtack"></i>
                    <div class="name">地图-图钉</div>
                    <div class="fontclass">.icon-map-thumbtack</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map-indicator"></i>
                    <div class="name">地图-指示牌</div>
                    <div class="fontclass">.icon-map-indicator</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-light"></i>
                    <div class="name">电灯</div>
                    <div class="fontclass">.icon-light</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-call"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-call</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tv"></i>
                    <div class="name">电视-显示器</div>
                    <div class="fontclass">.icon-tv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-film"></i>
                    <div class="name">电影</div>
                    <div class="fontclass">.icon-film</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-power"></i>
                    <div class="name">电源-关</div>
                    <div class="fontclass">.icon-power</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ok"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-ok</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shield"></i>
                    <div class="name">盾牌</div>
                    <div class="fontclass">.icon-shield</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-children"></i>
                    <div class="name">儿童</div>
                    <div class="fontclass">.icon-children</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qrcode"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-qrcode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-direction"></i>
                    <div class="name">方向</div>
                    <div class="fontclass">.icon-direction</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox-off"></i>
                    <div class="name">方形</div>
                    <div class="fontclass">.icon-checkbox-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox-on"></i>
                    <div class="name">方形2</div>
                    <div class="fontclass">.icon-checkbox-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-airplane"></i>
                    <div class="name">飞机</div>
                    <div class="fontclass">.icon-airplane</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redo"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-redo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-server"></i>
                    <div class="name">服务器</div>
                    <div class="fontclass">.icon-server</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox-ok"></i>
                    <div class="name">复选框</div>
                    <div class="fontclass">.icon-checkbox-ok</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy-rect"></i>
                    <div class="name">复制</div>
                    <div class="fontclass">.icon-copy-rect</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-high-road"></i>
                    <div class="name">公路</div>
                    <div class="fontclass">.icon-high-road</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-briefcase"></i>
                    <div class="name">公文包</div>
                    <div class="fontclass">.icon-briefcase</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-row"></i>
                    <div class="name">功能</div>
                    <div class="fontclass">.icon-row</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close-rect"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-close-rect</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-filter"></i>
                    <div class="name">过滤器</div>
                    <div class="fontclass">.icon-filter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-like"></i>
                    <div class="name">好评2</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-backward"></i>
                    <div class="name">后退</div>
                    <div class="fontclass">.icon-backward</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-prev"></i>
                    <div class="name">后退2</div>
                    <div class="fontclass">.icon-prev</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-slider"></i>
                    <div class="name">滑块</div>
                    <div class="fontclass">.icon-slider</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-work-card"></i>
                    <div class="name">徽章</div>
                    <div class="fontclass">.icon-work-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-undo"></i>
                    <div class="name">回复</div>
                    <div class="fontclass">.icon-undo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reply"></i>
                    <div class="name">回复-全部</div>
                    <div class="fontclass">.icon-reply</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-train"></i>
                    <div class="name">火车</div>
                    <div class="fontclass">.icon-train</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rocket"></i>
                    <div class="name">火箭</div>
                    <div class="fontclass">.icon-rocket</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-survival"></i>
                    <div class="name">急救箱</div>
                    <div class="fontclass">.icon-survival</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus-fill"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-plus-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus-border"></i>
                    <div class="name">加号2</div>
                    <div class="fontclass">.icon-plus-border</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus"></i>
                    <div class="name">加号3</div>
                    <div class="fontclass">.icon-plus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loading"></i>
                    <div class="name">加载</div>
                    <div class="fontclass">.icon-loading</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-credentials"></i>
                    <div class="name">驾照</div>
                    <div class="fontclass">.icon-credentials</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus-fill"></i>
                    <div class="name">减号</div>
                    <div class="fontclass">.icon-minus-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus-border"></i>
                    <div class="name">减号2</div>
                    <div class="fontclass">.icon-minus-border</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus"></i>
                    <div class="name">减号3</div>
                    <div class="fontclass">.icon-minus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy"></i>
                    <div class="name">剪切板</div>
                    <div class="fontclass">.icon-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building"></i>
                    <div class="name">建筑</div>
                    <div class="fontclass">.icon-building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-keyborad"></i>
                    <div class="name">键盘</div>
                    <div class="fontclass">.icon-keyborad</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link-arrow-up"></i>
                    <div class="name">箭头-上</div>
                    <div class="fontclass">.icon-link-arrow-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link-arrow-v"></i>
                    <div class="name">箭头-上下</div>
                    <div class="fontclass">.icon-link-arrow-v</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move"></i>
                    <div class="name">箭头-拖动</div>
                    <div class="fontclass">.icon-move</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link-arrow-down"></i>
                    <div class="name">箭头-下</div>
                    <div class="fontclass">.icon-link-arrow-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link-arrow-right"></i>
                    <div class="name">箭头-右</div>
                    <div class="fontclass">.icon-link-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link-arrow-left"></i>
                    <div class="name">箭头-左</div>
                    <div class="fontclass">.icon-link-arrow-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link-arrow-h"></i>
                    <div class="name">箭头-左右</div>
                    <div class="fontclass">.icon-link-arrow-h</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-trophy"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.icon-trophy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fall"></i>
                    <div class="name">降级</div>
                    <div class="fontclass">.icon-fall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exchange"></i>
                    <div class="name">交换</div>
                    <div class="fontclass">.icon-exchange</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-where"></i>
                    <div class="name">街景</div>
                    <div class="fontclass">.icon-where</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock-off-v2"></i>
                    <div class="name">解锁</div>
                    <div class="fontclass">.icon-lock-off-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock-off"></i>
                    <div class="name">解锁2</div>
                    <div class="fontclass">.icon-lock-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-no"></i>
                    <div class="name">禁止</div>
                    <div class="fontclass">.icon-no</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-number-sign"></i>
                    <div class="name">井号</div>
                    <div class="fontclass">.icon-number-sign</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ambulance"></i>
                    <div class="name">救护车</div>
                    <div class="fontclass">.icon-ambulance</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-life-buoy"></i>
                    <div class="name">救生圈</div>
                    <div class="fontclass">.icon-life-buoy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-coffee"></i>
                    <div class="name">咖啡</div>
                    <div class="fontclass">.icon-coffee</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-truck"></i>
                    <div class="name">卡车</div>
                    <div class="fontclass">.icon-truck</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next-step"></i>
                    <div class="name">快进</div>
                    <div class="fontclass">.icon-next-step</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-prev-step"></i>
                    <div class="name">快退</div>
                    <div class="fontclass">.icon-prev-step</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-speaker"></i>
                    <div class="name">扩音器</div>
                    <div class="fontclass">.icon-speaker</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-delete"></i>
                    <div class="name">垃圾桶2</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bluetooth"></i>
                    <div class="name">蓝牙</div>
                    <div class="fontclass">.icon-bluetooth</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gift"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.icon-gift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-history"></i>
                    <div class="name">历史记录</div>
                    <div class="fontclass">.icon-history</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-component"></i>
                    <div class="name">立方体</div>
                    <div class="fontclass">.icon-component</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-components"></i>
                    <div class="name">立方体组</div>
                    <div class="fontclass">.icon-components</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link-off"></i>
                    <div class="name">链接-断开</div>
                    <div class="fontclass">.icon-link-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-columns"></i>
                    <div class="name">列</div>
                    <div class="fontclass">.icon-columns</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list-v4"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.icon-list-v4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list-v3"></i>
                    <div class="name">列表2</div>
                    <div class="fontclass">.icon-list-v3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list-v2"></i>
                    <div class="name">列表3</div>
                    <div class="fontclass">.icon-list-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bell"></i>
                    <div class="name">铃声</div>
                    <div class="fontclass">.icon-bell</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bell-off"></i>
                    <div class="name">铃声-静音</div>
                    <div class="fontclass">.icon-bell-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ship"></i>
                    <div class="name">轮船</div>
                    <div class="fontclass">.icon-ship</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lightning"></i>
                    <div class="name">螺栓</div>
                    <div class="fontclass">.icon-lightning</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mic-on"></i>
                    <div class="name">麦克风</div>
                    <div class="fontclass">.icon-mic-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mic-off"></i>
                    <div class="name">麦克风-静音</div>
                    <div class="fontclass">.icon-mic-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anchor"></i>
                    <div class="name">地图锚</div>
                    <div class="fontclass">.icon-anchor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-name-card"></i>
                    <div class="name">名片</div>
                    <div class="fontclass">.icon-name-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-magic"></i>
                    <div class="name">魔术棒</div>
                    <div class="fontclass">.icon-magic</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gentleman"></i>
                    <div class="name">男士</div>
                    <div class="fontclass">.icon-gentleman</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-men"></i>
                    <div class="name">男性</div>
                    <div class="fontclass">.icon-men</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anonymous"></i>
                    <div class="name">匿名用户</div>
                    <div class="fontclass">.icon-anonymous</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lady"></i>
                    <div class="name">女士</div>
                    <div class="fontclass">.icon-lady</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-women"></i>
                    <div class="name">女性</div>
                    <div class="fontclass">.icon-women</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.icon-sort</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort-down"></i>
                    <div class="name">排序-降序</div>
                    <div class="fontclass">.icon-sort-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort-up"></i>
                    <div class="name">排序-升序</div>
                    <div class="fontclass">.icon-sort-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort-desc"></i>
                    <div class="name">排序-数量降序</div>
                    <div class="fontclass">.icon-sort-desc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort-asc"></i>
                    <div class="name">排序-数量升序</div>
                    <div class="fontclass">.icon-sort-asc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ticket"></i>
                    <div class="name">票</div>
                    <div class="fontclass">.icon-ticket</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pad"></i>
                    <div class="name">平板电脑</div>
                    <div class="fontclass">.icon-pad</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comment-v2"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-comment-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comment"></i>
                    <div class="name">评论2</div>
                    <div class="fontclass">.icon-comment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat"></i>
                    <div class="name">评论组</div>
                    <div class="fontclass">.icon-chat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chat-border"></i>
                    <div class="name">评论组2</div>
                    <div class="fontclass">.icon-chat-border</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-flag"></i>
                    <div class="name">旗帜</div>
                    <div class="fontclass">.icon-flag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pencil"></i>
                    <div class="name">铅笔</div>
                    <div class="fontclass">.icon-pencil</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-go"></i>
                    <div class="name">前进</div>
                    <div class="fontclass">.icon-go</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next"></i>
                    <div class="name">前进2</div>
                    <div class="fontclass">.icon-next</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-full"></i>
                    <div class="name">全屏</div>
                    <div class="fontclass">.icon-full</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rmb"></i>
                    <div class="name">人民币</div>
                    <div class="fontclass">.icon-rmb</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bold-arrow-up"></i>
                    <div class="name">人字形-上</div>
                    <div class="fontclass">.icon-bold-arrow-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bold-arrow-down"></i>
                    <div class="name">人字形-下</div>
                    <div class="fontclass">.icon-bold-arrow-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bold-arrow-right"></i>
                    <div class="name">人字形-右</div>
                    <div class="fontclass">.icon-bold-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bold-arrow-left"></i>
                    <div class="name">人字形-左</div>
                    <div class="fontclass">.icon-bold-arrow-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gantt"></i>
                    <div class="name">任务</div>
                    <div class="fontclass">.icon-gantt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar-v2"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-calendar-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar"></i>
                    <div class="name">日历2</div>
                    <div class="fontclass">.icon-calendar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upload"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-flask"></i>
                    <div class="name">烧瓶</div>
                    <div class="fontclass">.icon-flask</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vcr"></i>
                    <div class="name">摄像机</div>
                    <div class="fontclass">.icon-vcr</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rise"></i>
                    <div class="name">升级</div>
                    <div class="fontclass">.icon-rise</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-clock"></i>
                    <div class="name">时钟</div>
                    <div class="fontclass">.icon-clock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-inbox"></i>
                    <div class="name">收件箱</div>
                    <div class="fontclass">.icon-inbox</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mid"></i>
                    <div class="name">收起</div>
                    <div class="fontclass">.icon-mid</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bag-v2"></i>
                    <div class="name">手提包</div>
                    <div class="fontclass">.icon-bag-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bag"></i>
                    <div class="name">手提箱</div>
                    <div class="fontclass">.icon-bag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-book"></i>
                    <div class="name">书籍</div>
                    <div class="fontclass">.icon-book</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bookmark"></i>
                    <div class="name">书签</div>
                    <div class="fontclass">.icon-bookmark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-indicator"></i>
                    <div class="name">鼠标指针</div>
                    <div class="fontclass">.icon-indicator</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-database"></i>
                    <div class="name">数据库</div>
                    <div class="fontclass">.icon-database</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-refresh"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-refresh</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-double-arrow-up"></i>
                    <div class="name">双角符-上</div>
                    <div class="fontclass">.icon-double-arrow-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-double-arrow-down"></i>
                    <div class="name">双角符-下</div>
                    <div class="fontclass">.icon-double-arrow-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-double-arrow-right"></i>
                    <div class="name">双角符-右</div>
                    <div class="fontclass">.icon-double-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-double-arrow-left"></i>
                    <div class="name">双角符-左</div>
                    <div class="fontclass">.icon-double-arrow-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-random"></i>
                    <div class="name">随机</div>
                    <div class="fontclass">.icon-random</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-indent-remove"></i>
                    <div class="name">缩进-减</div>
                    <div class="fontclass">.icon-indent-remove</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-warning"></i>
                    <div class="name">叹号</div>
                    <div class="fontclass">.icon-warning</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-careful"></i>
                    <div class="name">叹号2</div>
                    <div class="fontclass">.icon-careful</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-drip"></i>
                    <div class="name">填色</div>
                    <div class="fontclass">.icon-drip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bar-code"></i>
                    <div class="name">条形码</div>
                    <div class="fontclass">.icon-bar-code</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-adjust"></i>
                    <div class="name">调整</div>
                    <div class="fontclass">.icon-adjust</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-check"></i>
                    <div class="name">听诊器</div>
                    <div class="fontclass">.icon-check</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stop"></i>
                    <div class="name">停止</div>
                    <div class="fontclass">.icon-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stop-circle"></i>
                    <div class="name">停止2</div>
                    <div class="fontclass">.icon-stop-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-address-book"></i>
                    <div class="name">通讯录</div>
                    <div class="fontclass">.icon-address-book</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chart-bar"></i>
                    <div class="name">图表</div>
                    <div class="fontclass">.icon-chart-bar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pin"></i>
                    <div class="name">图钉</div>
                    <div class="fontclass">.icon-pin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exit"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-exit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chip"></i>
                    <div class="name">微芯片</div>
                    <div class="fontclass">.icon-chip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-file"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-file</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.icon-folder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder-open"></i>
                    <div class="name">文件夹-打开</div>
                    <div class="fontclass">.icon-folder-open</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-file-text"></i>
                    <div class="name">文件-文本</div>
                    <div class="fontclass">.icon-file-text</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-files"></i>
                    <div class="name">文件组</div>
                    <div class="fontclass">.icon-files</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-question"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.icon-question</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-download"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chart-trend"></i>
                    <div class="name">线图</div>
                    <div class="fontclass">.icon-chart-trend</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-camera"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.icon-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-camera-old"></i>
                    <div class="name">相机-旧式</div>
                    <div class="fontclass">.icon-camera-old</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list"></i>
                    <div class="name">项目列表</div>
                    <div class="fontclass">.icon-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-car-v2"></i>
                    <div class="name">小汽车</div>
                    <div class="fontclass">.icon-car-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-heart"></i>
                    <div class="name">心形</div>
                    <div class="fontclass">.icon-heart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-envelope"></i>
                    <div class="name">信封</div>
                    <div class="fontclass">.icon-envelope</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-envelope-open"></i>
                    <div class="name">信封2</div>
                    <div class="fontclass">.icon-envelope-open</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-signal"></i>
                    <div class="name">信号</div>
                    <div class="fontclass">.icon-signal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card-solid"></i>
                    <div class="name">信用卡</div>
                    <div class="fontclass">.icon-card-solid</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-card"></i>
                    <div class="name">信用卡2</div>
                    <div class="fontclass">.icon-card</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mi"></i>
                    <div class="name">星号</div>
                    <div class="fontclass">.icon-mi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star-on"></i>
                    <div class="name">星形</div>
                    <div class="fontclass">.icon-star-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star-half"></i>
                    <div class="name">星形半颗</div>
                    <div class="fontclass">.icon-star-half</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-visible"></i>
                    <div class="name">眼睛</div>
                    <div class="fontclass">.icon-visible</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-invisible"></i>
                    <div class="name">眼睛-斜线</div>
                    <div class="fontclass">.icon-invisible</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">移动设备手机</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-music"></i>
                    <div class="name">音乐</div>
                    <div class="fontclass">.icon-music</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-soound-min"></i>
                    <div class="name">音量-低</div>
                    <div class="fontclass">.icon-soound-min</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sound-max"></i>
                    <div class="name">音量-高</div>
                    <div class="fontclass">.icon-sound-max</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mute"></i>
                    <div class="name">音量-关</div>
                    <div class="fontclass">.icon-mute</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sound"></i>
                    <div class="name">音量控制</div>
                    <div class="fontclass">.icon-sound</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-doctor"></i>
                    <div class="name">用户-医生</div>
                    <div class="fontclass">.icon-doctor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-group"></i>
                    <div class="name">用户组</div>
                    <div class="fontclass">.icon-group</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-umbrella"></i>
                    <div class="name">雨伞</div>
                    <div class="fontclass">.icon-umbrella</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-double-circle"></i>
                    <div class="name">圆点</div>
                    <div class="fontclass">.icon-double-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-radio-on"></i>
                    <div class="name">圆形</div>
                    <div class="fontclass">.icon-radio-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-radio-off"></i>
                    <div class="name">圆形2</div>
                    <div class="fontclass">.icon-radio-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud"></i>
                    <div class="name">云端</div>
                    <div class="fontclass">.icon-cloud</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-link"></i>
                    <div class="name">云端链接</div>
                    <div class="fontclass">.icon-cloud-link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-upload"></i>
                    <div class="name">云端上传</div>
                    <div class="fontclass">.icon-cloud-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-download"></i>
                    <div class="name">云端下载</div>
                    <div class="fontclass">.icon-cloud-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pause"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-pause</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pause-circle"></i>
                    <div class="name">暂停2</div>
                    <div class="fontclass">.icon-pause-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-expand"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-expand</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-warplane"></i>
                    <div class="name">战斗机</div>
                    <div class="fontclass">.icon-warplane</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-org"></i>
                    <div class="name">站点地图</div>
                    <div class="fontclass">.icon-org</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-up"></i>
                    <div class="name">长箭头-上</div>
                    <div class="fontclass">.icon-arrow-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-right"></i>
                    <div class="name">长箭头-右</div>
                    <div class="fontclass">.icon-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-down"></i>
                    <div class="name">长箭头-下</div>
                    <div class="fontclass">.icon-arrow-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chart-line"></i>
                    <div class="name">折线图</div>
                    <div class="fontclass">.icon-chart-line</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reset"></i>
                    <div class="name">重做</div>
                    <div class="fontclass">.icon-reset</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pc"></i>
                    <div class="name">桌面-电脑</div>
                    <div class="fontclass">.icon-pc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loop"></i>
                    <div class="name">转发</div>
                    <div class="fontclass">.icon-loop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-target"></i>
                    <div class="name">准星</div>
                    <div class="fontclass">.icon-target</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mini"></i>
                    <div class="name">最小化</div>
                    <div class="fontclass">.icon-mini</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-left"></i>
                    <div class="name">长箭头-左</div>
                    <div class="fontclass">.icon-arrow-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paper"></i>
                    <div class="name">纸飞机</div>
                    <div class="fontclass">.icon-paper</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-full"></i>
                    <div class="name">最大化</div>
                    <div class="fontclass">.icon-window-full</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dashboard"></i>
                    <div class="name">转速表</div>
                    <div class="fontclass">.icon-dashboard</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-compass"></i>
                    <div class="name">指南针</div>
                    <div class="fontclass">.icon-compass</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hospital"></i>
                    <div class="name">医院</div>
                    <div class="fontclass">.icon-hospital</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-notebook"></i>
                    <div class="name">笔记本电脑</div>
                    <div class="fontclass">.icon-notebook</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rank"></i>
                    <div class="name">排名</div>
                    <div class="fontclass">.icon-rank</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-car"></i>
                    <div class="name">小轿车</div>
                    <div class="fontclass">.icon-car</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bike"></i>
                    <div class="name">自行车</div>
                    <div class="fontclass">.icon-bike</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-moto"></i>
                    <div class="name">摩托车</div>
                    <div class="fontclass">.icon-moto</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wechat"></i>
                    <div class="name">社交微信</div>
                    <div class="fontclass">.icon-wechat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-audio"></i>
                    <div class="name">音频</div>
                    <div class="fontclass">.icon-audio</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cuff"></i>
                    <div class="name">手铐</div>
                    <div class="fontclass">.icon-cuff</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-prison"></i>
                    <div class="name">监狱</div>
                    <div class="fontclass">.icon-prison</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-police"></i>
                    <div class="name">警察</div>
                    <div class="fontclass">.icon-police</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-max"></i>
                    <div class="name">窗体-窗口化-细</div>
                    <div class="fontclass">.icon-window-max</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-min"></i>
                    <div class="name">窗体-窗体化-细</div>
                    <div class="fontclass">.icon-window-min</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-close"></i>
                    <div class="name">窗体-关闭-细</div>
                    <div class="fontclass">.icon-window-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-normal"></i>
                    <div class="name">窗体-窗口最大化-细</div>
                    <div class="fontclass">.icon-window-normal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-down"></i>
                    <div class="name">窗体-折叠</div>
                    <div class="fontclass">.icon-window-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-up"></i>
                    <div class="name">窗体-展开</div>
                    <div class="fontclass">.icon-window-up</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
